<template>
  <CommonCard title="今日交易用户数" value="182,425">
    <template #default>
      <div ref="chartRef" style="width: 100%; height: 100%"></div>
    </template>
    <template #footer>
      <span>退货率</span>
      <span class="common-data">5.91%</span>
    </template>
  </CommonCard>
</template>

<script lang="ts">
import CommonCard from './CommonCard.vue'
export default {
  name: 'TodayUsers',
  components: {
    CommonCard,
  },
}
</script>

<script lang="ts" setup>
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'

const chartRef = ref()
let myChart
const getOptions = () => {
  return {
    grid: {
      left: 0,
      right: 0,
    },
    xAxis: {
      data: [
        '一月',
        '二月',
        '三月',
        '四月',
        '五月',
        '六月',
        '七月',
        '八月',
        '九月',
        '十月',
        '十一月',
        '十二月',
      ],
    },
    yAxis: {
      show: false,
    },
    series: {
      data: [44, 126, 55, 88, 133, 99, 33, 113, 63, 98, 77, 123],
      type: 'bar',
    },
  }
}

onMounted(() => {
  myChart = echarts.init(chartRef.value)
  myChart.setOption(getOptions())

  // 当浏览器宽度发生变化的时候，图表也要发生变化
  window.addEventListener('resize', () => {
    myChart && myChart.resize()
  })
})
</script>

<style></style>
